<template>
  <div class="app-container">
    <!-- <div>
      <el-button @click="autoScroll">开始滚动</el-button>
    </div>
    <div>
      <el-button @click="initsmoothIncreaseHeight">增加高度</el-button>
    </div>
    <div id="myContainer" style="background-color: red">aaa</div>
    <div style="height: 400px">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <div>height: {{ height }}</div>
          <div>width: {{ width }}</div>
          <el-table-v2
            ref="tableRef"
            :columns="columns"
            :data="data"
            :width="width"
            :height="height"
            :row-height="rowHeight"
          />
        </template>
      </el-auto-resizer>
    </div> -->

    <div class="scroll__container">
      <div class="scroll__list__container">
        <div
          class="scroll__list__item__container"
          v-for="(item, index) in list"
          :key="index"
        >
          {{ item.name || "" }} - {{ index + 1 }}
        </div>
      </div>
      <div class="scroll__list__container">
        <div
          class="scroll__list__item__container"
          v-for="(item, index) in list"
          :key="index"
        >
          {{ item.name || "" }} - {{ index + 1 }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

import type { TableV2Instance } from "element-plus";

const list = ref<any[]>([]);

for (let i = 0; i < 50; i++) {
  list.value.push({
    name: "测试滚动",
  });
}

const generateColumns = (length = 10, prefix = "column-", props?: any) =>
  Array.from({ length }).map((_, columnIndex) => ({
    ...props,
    key: `${prefix}${columnIndex}`,
    dataKey: `${prefix}${columnIndex}`,
    title: `Column ${columnIndex}`,
    width: 150,
  }));

const generateData = (
  columns: ReturnType<typeof generateColumns>,
  length = 200,
  prefix = "row-"
) =>
  Array.from({ length }).map((_, rowIndex) => {
    return columns.reduce(
      (rowData, column, columnIndex) => {
        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`;
        return rowData;
      },
      {
        id: `${prefix}${rowIndex}`,
        parentId: null,
      }
    );
  });

const columns = generateColumns(10);
const data = generateData(columns, 30);
const tableRef = ref<TableV2Instance>();
const scrollDelta = ref(200);
const scrollRows = ref(10);

const handleScrollTo10 = () => {
  tableRef.value?.scrollToRow(10);
};

function scrollByPixels() {
  tableRef.value?.scrollToTop(scrollDelta.value);
}

function scrollByRows() {
  tableRef.value?.scrollToRow(scrollRows.value);
}

// -----------自动滚动逻辑 -----------

// 自动滚动
const timer = ref<any>(null); // 计时器id
let activeRowIndex = ref(1);
const rowHeight = ref<number>(170);
const autoScroll = () => {
  // let startTop = activeRowIndex.value; // 当前滚动位置
  // let endTop = activeRowIndex.value + rowHeight.value; // 目标滚动位置
  // let distance = endTop - startTop; // 滚动距离
  // let duration = 1500; // 总时长
  // let startTime: any = null;

  // let elapsedTime = timestamp - startTime;
  // let progress = Math.min(elapsedTime / duration, 1);
  // let scrollTop = startTop + distance * progress;

  timer.value = setInterval(() => {
    let newScroll = 0;
    let childTimer = setInterval(() => {
      newScroll += 5;
      // console.log("内部循环  ", activeRowIndex.value + newScroll);
      tableRef.value?.scrollToTop(activeRowIndex.value + newScroll);
      if (newScroll >= rowHeight.value) {
        if (activeRowIndex.value > (data.length - 1) * rowHeight.value) {
          activeRowIndex.value = 0;
        } else {
          activeRowIndex.value += rowHeight.value;
        }
        // console.log("字节数了 ", activeRowIndex.value);
        clearInterval(childTimer);
      }
    }, 30);
    if (activeRowIndex.value > (data.length - 1) * rowHeight.value) {
      activeRowIndex.value = 0;
      clearInterval(timer.value);
      timer.value = null;
      autoScroll();
    } else {
      activeRowIndex.value += rowHeight.value;
    }
  }, 2000);
};

// -------ceshi--------------------------------
function smoothIncreaseHeight(container, endHeight, duration) {
  const startHeight = container.offsetHeight;
  const startTime = performance.now();

  const updateHeight = (timestamp) => {
    const elapsedTime = timestamp - startTime;
    const progress = Math.min(elapsedTime / duration, 1);
    const currentHeight = lerp(startHeight, endHeight, progress);

    container.style.height = `${currentHeight}px`;

    if (progress < 1) {
      requestAnimationFrame(updateHeight);
    }
  };

  requestAnimationFrame(updateHeight);
}

// 线性插值函数
function lerp(start, end, progress) {
  return start + (end - start) * progress;
}

const initsmoothIncreaseHeight = () => {
  // 示例用法
  const container = document.getElementById("myContainer");
  smoothIncreaseHeight(container, 170, 1000); // 从 0px 平滑增加到 170px，持续时间为 1000 毫秒
};
</script>

<style lang="scss" scoped>
@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
.app-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  .scroll__container {
    margin: 80px auto;
    width: 60%;
    height: 500px;
    overflow: auto;
    border: 1px solid black;
    border-radius: 8px;
    .scroll__list__container {
      .scroll__list__item__container {
        text-align: center;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
        background-color: #eee;
        animation: scroll 2s linear infinite;
        animation-delay: 2s; /* 设置动画的间隔时间为 2 秒 */
      }
    }
  }
}
</style>
